<template>
    <div class="add_address">
        <ComHeader title="领取奖品" leftArrow="left"/>
        <div class="address">
            <div class="address-box">
                <label for="">{{type == 2?'收货人':'支付宝名字'}}：</label>
                <input type="text" v-model="name" :placeholder="type == 2?'请输入收货人姓名':'请输入支付宝姓名'">
            </div>
             <div class="address-box">
                <label for="">{{type == 2?'手机号码':'支付宝账号'}}：</label>
                <input type="text" v-model="phone" :placeholder="type == 2?'请输入手机号码':'请输入支付宝账号'">
            </div>
             <div class="address-box" v-if="type == 2">
                <mt-cell title="选择地区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
            </div>
             <div class="address-box" v-if="type == 2">
                <label for="">详细地址：</label>
                <input type="text" v-model="address" placeholder="详细街道地址">
            </div>
        </div>

        <div class="footer">
            <a @click="btn">确定提交</a>
        </div>
        <mt-popup v-model="areaVisible" class="area-class" position="bottom">
          <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
        </mt-popup>
    </div>
</template>

<script>
import api from "@/fetch/api"
import ComHeader from "@/common/ComHeader";
import { mapGetters, mapMutations } from "vuex";
import { Toast, Switch } from "mint-ui";

function setlocalStorage(storeName, storeData) {
 var storeStr = JSON.stringify(storeData);
 var storeArr = window.localStorage.setItem(storeName, storeStr);
 return storeArr;
};
function getlocalStorage(storeName, storeData){
 var storeName = localStorage.getItem(storeName);
 var storeArr = JSON.parse(storeName)
 return storeArr;
};

var data;
if(getlocalStorage('pca-code')){
   data = getlocalStorage('pca-code');
}else{
  var pcacode = require('../../../../static/pca-code.json');
  //setlocalStorage('pca-code', pcacode);
  data = pcacode;
}

let index = 0
let index2 = 0
let index3 = 0
// 初始化省
let province = data.map(res => {
  return res.name
})
// 初始化市
let city = data[index].children.map(res => {
  return res.name
})
// 初始化区
let area = data[index].children[index2].children.map(res => {
  return res.name
})

export default {
  name: "add_address",
  data() {
    return {
      downline: false, //活动是否结束
      downlineText: '活动已结束，谢谢您的参与！后期还会有丰富的活动，请敬请留意。',// 活动结束提示
      name: "",
      phone: "",
      address: "",
      zipcode: "",
      isdefault: false,
      areaVisible: false,
      streetVisible: false,
      areaString: '请选择',
      slots: [{
        flex: 1,
        values: province,
        className: 'slot1',
        textAlign: 'left'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: city,
        className: 'slot3',
        textAlign: 'left'
      }, {
        divider: true,
        content: '-',
        className: 'slot4'
      }, {
        flex: 1,
        values: area,
        className: 'slot5',
        textAlign: 'left'
      }],
      code: this.getUrlParams('code'),
      type: 2,
      editState: true
    };
  },
  components: {
    ComHeader,
    Switch
  },
  created() {
    alert(this.companyUnique)
  },
  methods: {

    btn() {
      // 活动结束的提示
      if(this.downline){
        return Toast(this.downlineText);
      }
      if (
        this.name == "" ||
        this.phone == ""
      ) {
        if(this.type == 2 && this.address == ""){
          Toast({
            message: "信息请填写完整",
            duration: 950
          });
        }

      } else {
        //需要邮寄的

        this.ethelWxUserInfo = this.getlocalStorage('ethelWxUserInfo');
        if(this.type == 2){
          const params = {
            code: this.code,
            user: this.name,
            phone: this.phone,
            // user: this.ethelWxUserInfo.username?this.ethelWxUserInfo.username:this.ethelWxUserInfo.nickname,
            address: this.areaString.split(',')[0]
            +' '+this.areaString.split(',')[1]
            +' '+this.areaString.split(',')[2]
            +' '+this.address,
          };
          api.luckyWheelGetLotteryAddr(params)
            .catch(res => {
              this.print(res);
              // Toast('提交成功！请注意查收');
              if(res.response){
                Toast(res.response.data.error);
              }else{
                Toast('提交成功！请注意查收。');
                setTimeout(()=>{
                  this.$router.push({
                    path: "/lottery"
                  });
                }, 1500)

              }

            })
        //提供支付宝就行
        }else{
          const params = {
            code: this.code,
            name: this.name,
            phone: this.phone
          };
          api.luckyWheelGetLotteryAddr(params)
            .catch(res => {
              this.print(res);
              if(res.response){
                Toast(res.response.data.error);
              }else{
                Toast('提交成功！请注意查收。');
                setTimeout(()=>{
                  this.$router.push({
                    path: "/activity/luckyWheel/cj"
                  });
                }, 1500)
              }
            })
        }

      }
    },

    handlerArea() {
      this.areaVisible = true
    },
    onValuesChange(picker, values) {
      let one = values[0]
      let two = values[1]
      let three = values[2]
      console.log(values)
      index = province.indexOf(one)
      if (index >= 0 && province.length > 0) {
        city = data[index].children.map(res => {
          return res.name
        })
        picker.setSlotValues(1, city)
        two = values[1]
      }

      index2 = city.indexOf(two)
      if (index2 >= 0 && city.length > 0) {
        area = data[index].children[index2].children.map(res => {
          return res.name
        })
        picker.setSlotValues(2, area)
        three = values[2]
      }
      if(this.editState && this.editAddress){
        this.areaString = this.editAddress.province+','+this.editAddress.city+','+this.editAddress.quxian;
      }else{
        this.areaString = values.join(',')
      }
      this.editState = false
    }
  }
};
</script>

<style lang="stylus" scoped>
.address {
    padding-top: 1.45rem;
    border-top: 1px solid #ddd;
    .address-box {
        width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        background: #fff;

        label {
            width: 30%;
            height: 100%;
            padding-left: 0.58rem;
            font-size: 0.4rem;
            display: block;
            float: left;
        }

        input {
            width: 70%;
            font-size: 0.4rem;
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.3rem;
    border-top: 1px solid #e0e0e0;
    background: #ffffff;

    a {
        float: none;
        display: block;
        margin: 0.18rem auto;
        text-align: center;
        width: 95%;
        height: 0.9rem;
        line-height: 0.9rem;
        border-radius: 20px;
        font-size: 0.28rem;
        color: #fff;
        background-color: #00acff;
    }
}
.isdefault{
  padding-top: .3rem;
}
.area-class {
  width: 100%;
  height: 50%;
}
.picker-items{
  text-align: center;
}

</style>
<style lang="stylus">
.add_address {
  .mint-cell-wrapper,.mint-cell:last-child{
    background-image: -webkit-linear-gradient(top, #eee, #eee 50%, transparent 50%);
    background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);
  }
  .mint-cell{
    min-height: 1.5rem;
    border-bottom: 1px solid #eee;
  }
  .mint-cell-text{
    padding-left: .36rem;
    font-size: .4rem
  }
}
</style>
